<template>
    <div class="scroll-wrapper" ref="wrapper">
        <div class="scroll-content">
            <current-city />
            <city-list />
        </div>
    </div>
</template>

<script>
/**
 * BetterScroll这个滚动插件得固定写法
 * 1、样式一定要如下这么写，一定要有两层结构包裹住，里面才是我们写得滚动区域得东西
 * <div class="scroll-wrapper" ref="wrapper">
 *    <div class="scroll-content">
 *       这里才是我们开发者写东西得区域
 *    </div>
 * </div>
 * 
 * 2、引入BetterScroll插件，import BetterScroll from 'better-scroll';
 * 3、一定要在所有DOM都挂载完成之后，才可以挂载BetterScroll插件，如vue中要在mounted(){}函数内部挂载，这样才可以初始化好
*/
import BetterScroll from 'better-scroll';
import CurrentCity from './CityList/CurrentCity';
import CityList from './CityList/Index'

export default {
    name: 'CityScrollWrapper',
    components: {
        CurrentCity,
        CityList
    },
    mounted() {
        this.scroll = new BetterScroll(this.$refs.wrapper, {
            mouseWheel: true,
            // preventDefault: false,
            click: true,
            tap: true
        })
    }
}
</script>

<style lang="sass" scoped>

</style>